<template>
  <div v-if="isShow" class="loading">
    loading...
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

const isShow = ref(false)


const show = () => isShow.value = true
const hide = () => isShow.value = false

// 将函数暴露出去
defineExpose({
  show, hide
})

</script>

<style lang='scss' scoped>
.loading {
  position: absolute;
  background-color: black;
  opacity: .5;
  font-size: 2em;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}
</style>